<template>
  <div>
  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="9">
        <el-input clearable v-model="queryInfo.query" placeholder="请输入商品名" prefix-icon="el-icon-search">
          <el-button slot="append" icon="el-icon-search" @click="getStockList"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-table :data="stockList.slice((queryInfo.pageNum-1)*queryInfo.pageSize,queryInfo.pageNum*queryInfo.pageSize)"
    style="width: 100%"
    stripe border fixed>
        <el-table-column
          prop="inStorehouseId"
          label="数据来源单号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="locationId"
          label="货位编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="locationName"
          label="货位名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="barCode"
          label="商品条码"
          width="180">
        </el-table-column>
        <el-table-column
          prop="productName"
          label="商品名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="totalQuantity"
          label="总数"
          width="180">
        </el-table-column>
        <el-table-column
          prop="availableQuantity"
          label="可用数量"
          width="180">
        </el-table-column>
        <el-table-column
          prop="lockedQuantity"
          label="锁定数量"
          width="180">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="180">
        </el-table-column>
      </el-table>

     <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
      </el-pagination>

    </el-card>

  </div>

</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      stockList: []
    }
  },
  methods: {
    handleSizeChange (val) {
      this.queryInfo.pageSize = val
      this.getStockList()
    },

    handleCurrentChange (val) {
      this.queryInfo.pageNum = val
      this.getStockList()
    },

    async getStockList () {
      const { data: result } = await this.$http.get('/stock/list', { params: this.queryInfo })
      if (result.status !== 200) return this.$message.error('获取列表失败')
      this.total = result.data.total
      this.stockList = result.data.rows
    }

  },

  mounted () {
    this.getStockList()
  }
}
</script>

<style>

</style>
